<template>
  <div class="com-container">
    <div class="title" :style="comstyle">
        <span>{{"┃ "+showtitle}}</span>
        <span class="iconfont titleicon"  :style="comstyle"   @click="showchoices= !showchoices">&#xe6eb</span>
        <div class="select-con" v-show="showchoices" :style="marginStyle">
            <div class="select-item" v-for="item in selectTypes" :key="item.key" @click="handleitem(item.key)">{{item.text}}</div>
        </div>
        </div>
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
 name: 'Trend',
  data() {
    return {
      chartInstance: null,
      allData: null,
      showchoices: false,
      choiceType: "map",
      titlefontsize: 0,
      //半透明的颜色值
      colorArr1: [
        "rgba(11,168,44,0.5)",
        "rgba(44,110,255,0.5)",
        "rgba(22,242,217,0.5)",
        "rgba(254,33,30,0.5)",
        "rgba(250,105,0,0.5)",
      ],
      //全透明的颜色值
      colorArr2: [
        "rgba(11,168,44,0)",
        "rgba(44,110,255,0)",
        "rgba(22,242,217,0)",
        "rgba(254,33,30,0)",
        "rgba(250,105,0,0)",
      ],
    };
  },
  created() {
    //在组件创建完成之后 进行的回调函数注册
    this.$socket.registerCallback("trendData", this.getData);
  },
  mounted() {
    this.initChart();
    // this.getData();
    //发送数据给服务器，请求数据
    // this.$socket.send({
    //   action: "getData",
    //   socketType: "trendData",
    //   chartName: "trend",
    //   value: "",
    // });
// this.$socket.ws.onopen = () = {
				this.$socket.send({
					action: getData,
					socketType: trendData,
					chartName: trend,
					value: ''
				})
			// };

    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
    console.log(this.allData);
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    //在组件创建销毁之后 进行的回调函数的取消
    this.$socket.unRegisterCallback("trendData");
  },
  computed: {
    //标题筛选条目
    selectTypes() {
      if (!this.allData) {
        return [];
      } else {
        return this.allData.type.filter((item) => {
          return item.key !== this.choiceType;
        });
      }
    },
    showtitle() {
      if (!this.allData) {
        return "";
      } else {
        return this.allData[this.choiceType].title;
      }
    },
    comstyle() {
      return {
        fontSize: this.titlefontsize + "px",
      };
    },
    marginStyle() {
      return {
        marginLeft: this.titlefontsize + "px",
      };
    },
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.trend_ref, this.theme);
      const initOptions = {
        grid: {
          left: "3%",
          top: "35%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: 20,
          top: "15%",
          icon: "circle",
        },
      };
      this.chartInstance.setOption(initOptions);
    },
    //ret 就是服务端发送给客户端的图标的数据
    getData(ret) {
      // const { data: ret } = await this.$axios.get("trend");
      this.allData = ret;
     console.log(ret);
      this.updateChart();
    },
    updateChart() {
      // 处理数据
      //类目轴的数据
      const timeArr = this.allData.common.month;
      // y轴的数据 series的数据
      const valueArr = this.allData[this.choiceType].data;
      const seriesArr = valueArr.map((item, index) => {
        return {
          name: item.name,
          type: "line",
          data: item.data,
          stack: "map",
          areaStyle: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.colorArr1[index] },
            {
              offset: 1,
              color: this.colorArr2[index],
            },
          ]),
        };
      });
      //图例的数据
      const legendArr = valueArr.map((item) => {
        return item.name;
      });
      const dataOption = {
        xAxis: {
          data: timeArr,
        },
        legend: { data: legendArr },
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      this.titlefontsize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        legend: {
          itemWidth: this.titlefontsize,
          itemHeight: this.titlefontsize,
          itemGap: this.titlefontsize,
          textStyle: {
            fontSize: this.titlefontsize / 2,
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    handleitem(currenttype) {
      this.choiceType = currenttype;
      this.updateChart();
      this.showchoices = false;
    },
  },
   computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme () {
      console.log('主题切换了')
      this.chartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updateChart() // 更新图表的展示
    }
  }
};
</script>

<style lang="less" scoped>
.title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
  color: white;
  .titleicon {
    margin-left: 10px;
    cursor: pointer;
  }
  .select-con {
    background-color: #222733;
  }
  .select-item {
    cursor: pointer;
  }
}
</style>